import React, { Component } from 'react'
import { Card, Table, Tag, Space, Button } from 'antd';
import { getAllRolesAPI } from '../../apis/characterAPI';
import AuthModal from '../../components/authModal';

export default class index extends Component {
    state = {

        data: [],
        menus: [],
        isModalVisible: false
    }
    showAuthModal = (boo) => {
        this.setState({
            isModalVisible: boo
        })
    }
    enterAuth = (menus, cid) => {
        this.setState({ menus, cid })
        this.showAuthModal(true)
    }
    getRoles = async () => {
        const res = await getAllRolesAPI()
        console.log('getRoles()', res);
        this.setState({
            data: res.data.data
        })
    }
    componentDidMount() {
        this.getRoles()
    }
    render() {
        const { data, isModalVisible, menus, cid } = this.state
        const columns = [
            {
                title: '角色名称',
                dataIndex: 'name',
                key: 'name',
                render: text => <a>{text}</a>,
            },
            {
                title: '授权人',
                dataIndex: 'authUser',
                key: 'authUser',
            },
            {
                title: '授权时间',
                dataIndex: 'authTime',
                key: 'authTime',
            },

            {
                title: '操作',
                render: rowData => (
                    <>
                        <Button onClick={() => this.enterAuth(rowData.menus, rowData._id)}>授权</Button>
                        &nbsp; &nbsp; &nbsp;
                        <Button>删除</Button>
                    </>
                ),
            },

        ];
        return (
            <div>
                {isModalVisible ? <AuthModal getRoles={this.getRoles} cid={cid} menus={menus} showAuthModal={this.showAuthModal}></AuthModal> : null}
                <Card title="角色管理" extra={<Button >添加</Button>} style={{ width: "100%" }}>
                    <Table rowKey="_id" columns={columns} dataSource={data} pagination={{ defaultPageSize: 5, showQuickJumper: true, showSizeChanger: true, pageSizeOptions: ['5', '10', '15', '20'] }} />

                </Card>
            </div>
        )
    }
}
